<template>
	<view>
		<view class="m-t-b">
			<u-search @search="onSearch" search-icon="/static/tduck/s.png" shape="square" placeholder="搜索"
				bg-color="#fff" :show-action="false" />
		</view>
		<scroll-view class="scroll-Y" scroll-y="true" @scrolltolower="lower" :scroll-top="scrollTop" @scroll="scroll">
			<view class="list flex flex-wrap">
				<view class="list-item" v-for="(item, index) of list" :key="item.id" @click="toHandle(item)">
					<view class="list-item-body" @click="handleOpenDir(item)">
						<view v-if="item.type !== 3" class="status" :class="'status-' + item.status" />
						<view>
							<image mode="widthFix" class="img" v-if="item.type === 3"
								src="/static/tduck/form/folder.png">
							</image>
							<image mode="widthFix" class="img" v-else src="/static/tduck/form/folder-o.png"></image>
						</view>
						<view class="form-name u-line-1">{{ item.name }}</view>
						<view v-if="item.type === 3" class="flex form-btn">
							<view class="flex-1" @click.stop="onRename(item)">重命名</view>
							<view class="flex-1" @click.stop="onDelete(item.formKey,index)">删除</view>
						</view>
						<view v-else class="flex form-btn">
							<view class="flex-1">查看</view>
							<view class="flex-1">数据</view>
							<view class="flex-1">更多</view>
						</view>
					</view>
				</view>
			</view>
			<view class="m-t">
				<u-empty v-if="!list.length" src="/static/tduck/null.png" text="啊哦~没有数据" mode="list" />
				<view v-if="list.length < total && loadStatus !=='nomore'" class="loadmore" @click="loadMore">
					<u-loadmore :status="loadStatus"></u-loadmore>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				navTitle: '协作表单',
				query: {
					current: 1,
					size: 20,
					folderId: 0,
					name: ''
				},
				loadStatus: 'loadmore',
				list: [],
				total: 0
			};
		},
		onLaunch(e) {
			console.log(e);
		},
		created() {
			this.loadList()
			uni.$on('refreshData', (folderId) => {
				console.log(folderId)
			})
		},
		methods: {
			lower(e) {
				this.loadMore();
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			loadMore() {
				if (this.list.length >= this.total || this.loadStatus === 'loading') {
					return;
				}
				this.loadStatus = "loading";
				setTimeout(() => {
					this.query.current += 1;
					this.loadList();
				}, 100);
			},
			loadList() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$u.api.getFormCooperationPage(this.query).then(res => {
					if (!res.records || res.records.length == 0) {
						this.loadStatus = "nomore";
						return;
					}
					this.list = this.list.concat(res.records);
					this.total = res.total;
					this.query.current = res.current;
					this.query.size = res.size;
					this.loadStatus = "loadmore";
					uni.hideLoading()
				});
			},
			onSearch(value) {
				this.list = [];
				this.query.current = 0;
				this.query.name = value;
				this.loadList();
			},
			onRename(item) {
				const _t = this

				const success = (res) => {
					const {
						confirm,
						content
					} = res;
					if (confirm && content) {
						item.name = content
						_t.$u.api.form.updateForm(item).then(res => {
							_t.$u.toast('修改成功')
						})
					}
				}

				uni.showModal({
					title: '重命名文件夹名称',
					content: '',
					editable: true,
					placeholderText: item.name,
					success
				});
			},
			onDelete(key, index) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认删除该文件夹?',
					success: function(res) {
						if (res.confirm) {
							that.$u.api.form.deleteForm({
								'formKey': key
							}).then(res => {
								if (res) {
									that.$u.toast('刪除成功')
									that.list.splice(index, 1)
								}
							})
						}
					}
				});
			},
			handleOpenDir(item) {
				if (item.folder) {
					const obj = {
						query: this.query,
						list: this.list,
						scrollTop: this.old.scrollTop,
						total: this.total
					}

					uni.setStorage({
						key: 'formPageData',
						data: JSON.stringify(obj),
						success: function() {}
					});


					this.query.folderId = item.id
					this.navTitle = item.name
					this.onSearch('')
					this.$emit('folder', item.name)
				}
			},
			onBack() {
				const _t = this;
				_t.navTitle = '普通表单';
				uni.getStorage({
					key: 'formPageData',
					success: (res) => {
						const {
							query,
							list,
							scrollTop,
							total
						} = JSON.parse(res.data);

						_t.list = list;
						_t.total = total;
						query.folderId = 0;
						_t.query = query;
						_t.$nextTick(() => {
							setTimeout(() => {
								_t.scrollTop = scrollTop;
							}, 300)
						})
					}
				});
				// this.onSearch('');
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: $u-bg-color;
	}
</style>
<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: $u-bg-color;
	}

	.scroll-Y {
		height: 72vh;
	}

	.list {
		margin: -12.68rpx;
		font-size: 25.36rpx;

		.list-item {
			width: 50%;
			padding: 12.68rpx;
		}

		.list-item-body {
			background-color: #fff;
			border-radius: 18.12rpx;
			position: relative;
			padding: 36.23rpx;
			padding-bottom: 0;
		}

		.img {
			display: block;
			width: 211.96rpx;
			margin: 0 auto;
		}

		.status {
			width: 18.12rpx;
			height: 18.12rpx;
			border-radius: 50%;
			background-color: #878787;
			position: absolute;
			left: 18.12rpx;
			top: 18.12rpx;
		}

		.status-2 {
			background-color: #69B900;
		}

		.status-3 {
			background-color: #E4580D;
		}

		.form-name {
			margin-top: 18.12rpx;
		}

		.form-btn {
			color: #1BA6FC;
			text-align: center;
			line-height: 72.46rpx;
		}
	}

	.hide-nav {
		height: 0;
		overflow: hidden;
	}
</style>
